<template>
	<div class="settlePage">
		<!-- 顶部标题 -->
		<div class="settleAllPage">
			<div class="top_fixed">
				<div class="to_top">
					<!-- app点餐的title和图标 -->
						<van-row type="flex" >
							
							  <van-row type="flex" class="titleName">
							    <van-col span="24">
								  <van-icon name="arrow-left"size="20px" @click="backToOrder" />
							  	  <h4>提交订单</h4>
							    </van-col>
							  </van-row>
						</van-row>
				</div>
			</div>
			
			<div class="settle_content">
				<div class="settle_content_top">
					
						<!-- 地址信息 -->
						<van-row type="flex" >
						  <van-col span="24">
							 <p class="top_title_name">贝蒂餐厅</p>
							 <div class="top_content_distant">
								<img src="../assets/my/地址.png" >
								 <div class="distant_text">距离你388m</div>
								 </div>
								  <div class="distant_address">重庆市南岸区南坪街道惠工路15号 </div>
						  </van-col>
						</van-row>
						<div class="settle_content_type_out">
							<van-row type="flex" class="settle_content_type typeone">
								<van-col span="12"><p class="text">享用方式</p> </van-col>
								<van-col span="6"><van-button color="#E91F3C" hairline  >门店就餐</van-button></van-col>
								<van-col span="6"><van-button plain hairline  type="primary">打包外带</van-button></van-col>
							</van-row>
						</div>
						<div class="settle_content_type_out">
							<van-row type="flex" class="settle_content_type">
								<van-col span="12"><p class="text">预留电话</p> </van-col>
								<van-col span="6"><p class="phoneNum">17623645586</p></van-col>
								
								<van-col span="6"><p class="autoFill">自动填写</p></van-col>
							</van-row>
						</div>
						<div class="settle_content_type_out">
							<van-row type="flex" class="settle_content_type">
								<van-col span="12"><p class="text">就餐时间</p> </van-col>
								<van-col span="12"><p class="righto_eat">立即就餐</p></van-col>
							
							</van-row>
						</div>
						
					
				</div>
				
				<div class="settle_content_center">
					<div class="dishes_list" v-for="(item,index) in checkDish"  :key="index">	
						<van-row type="flex" >
							<van-col span="6" >
								<img :src="item.path" >
							</van-col>
							<van-col span="18">
								<div class="dish_top">
									<p>{{item.name}}</p>
									<p>{{item.price | price}}</p>
								</div>
								<div class="dish_bottom">
									<p>×{{item.num}}</p>
								</div>
							</van-col>
							
						</van-row>
						
						
					</div>
					<div class="dishes_money">
						<p >合计￥{{totalMoney}}</p>
					</div>
					
				</div>
				
				<div class="settle_content_bottom">
					<p>备注</p>
					<p class="grey_text">口味、偏好等要求&nbsp;></p>
				</div>
			</div>
			
			<div class="bottom_fixed">
				<div class="left">
					<p>合计:</p>
					<p class="finalMoney">{{totalMoney |price}}</p>
				</div>
				<div class="right">
					<p class="sumbit_pay" @click="chosePayWay">提交支付</p>
				</div>
			</div>
			
			
					<van-action-sheet v-model="showPay" title="请选择支付方式">
							<div class="content_pay">
								<router-link :to="{path:'/orderListPage',query:{checklist:checkDish}}">
								<p @click="wechatpay">微信支付</p>
								<p @click="zhifupay">支付宝支付</p>
									</router-link>
							</div>
					</van-action-sheet>
		
	
			
			
			
			
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import { Button,Card,Popup, ActionSheet,Toast   } from 'vant';
	
Vue.use(Button);
Vue.use(Card);
Vue.use(Popup);
Vue.use(ActionSheet );
Vue.use(Toast );

export default{
	name :'SettlePage',
	data(){
		return{
			checkDish:this.$route.query.check,
			totalMoney:0,
			showPay:false,
			actions: [{ name: '微信支付' }, { name: '支付宝支付' },],
		}
	},
	methods:{
		backToOrder(){
			this.$router.go(-1);
		},
		countMoney(){
			this.checkDish.forEach((dish)=>{
				this.totalMoney+=dish.num*dish.price
			})
		},
		chosePayWay(){
			this.showPay=true;
		},
		wechatpay(){
			Toast("微信支付成功");
		},
		zhifupay(){
			Toast("支付宝支付成功");
		},
		  
	},
	created(){
		this.countMoney()
	
	},
	mounted (){
		this.$router.afterEach((to, from, next) => {
		    window.scrollTo(0, 0)
		})
	},
	    
	filters:{
		price(val){
			return "￥"+val
		}
	},

}
</script>

<style scoped>
	
 .content_pay {
    padding: 16px 16px 20px;
  }
  .content_pay a{
	  text-decoration: none;
	  color: black;
  }
.settleAllPage{
	
	width: 375px;
	background-color: #f7f7f7;
	height: 700px;
	padding-bottom: 60px;
}
.to_top{
	width:375px;
	height:50px;
	background:#E91F3C;
	color:#fff;
	text-align:center;
	position:fixed;
	margin:0 auto;
	z-index: 10;
	top: 0;
	left: 0;
}
.to_top .titleName{
	width:375px;
	height:40px;
	font-size: 16px;
	position:absolute;
	bottom:0px;
	line-height:0px;
}
.to_top .titleName .van-icon{
	position: absolute;
	width:30px;
	height:30px;
	line-height:30px;
	left:10px;
	top: 5px;
}
.settle_content{
	position: absolute;
	width: 350px;
	margin-left: 12px;
	margin-right: 13px;
	
}
.settle_content_top{
	border-radius: 10px;
	margin-top: 60px;
	height: 280px;
	background-color: white;
}
.settle_content_top .top_title_name{
	font-weight: 800;
	font-size: 18px;
	margin-left: 10px;
	text-align: left;
}
.top_content_distant{
	display: flex;
	
	margin-top: -10px;
		
}
.top_content_distant img{
	width: 20px;
	height: 20px;
	margin-left: 10px;
}
.top_content_distant .distant_text{
	font-size: 12px;
color: #aeaeae;
	margin-left: 10px;
	text-align: left;
	
}
.distant_address{
	font-size: 14px;
	
	text-align: left;
	margin-left: 10px;
	margin-top: 10px;
}
.settle_content_type_out{
	margin: 2px 10px 0px 10px;
}
.settle_content_type_out .typeone{
	margin-top: 10px;
}
.settle_content_type_out .settle_content_type{
	border-top: 1px #f5f5f5 solid;
}
.settle_content_type .text{
	text-align: left;
	margin-left: 10px;
	font-size: 17px;
}
.settle_content_type .van-button{
	margin-right: 5px;
	margin-top: 10px;
	width: 80px;
	height: 40px;
	font-size: 12px;
	color: black;
	border: 0px solid #d2d2d2;
}
.settle_content_type .phoneNum{
	font-size: 13px;
	margin-top: 20px;
}
.settle_content_type .autoFill {
	border: 1px solid #e91f3c;
	width: 80px;
	font-size: 13px;
	height: 25px;
	padding: 3px 5px 3px 5px;
	border-radius: 8px;
	box-sizing: border-box;
	margin-left: 5px;
	color: #e91f3c;
}
.righto_eat{
	color: #e91f3c;
	font-size: 16px;
	text-align: right;
	margin-right: 10px;
}

.settle_content_center{
	background-color: white;
	border-radius: 10px;
	margin-top: 10px;
	
}
.settle_content_center p{
	font-size: 18px;
	text-align: right;
	margin: 10px;
	padding: 15px;
}
.dishes_money{
	border-top: 1px solid #f0f0f0;
	
}
.dishes_list {
		height: 80px;
}
.dishes_list img{
	
	width: 60px;
	height: 60px;
	margin-left: 20px;
	margin-top: 10px;
}
.dish_top{
	
	display: flex;
	
	font-size: 16px;
	font-weight: 600;
	justify-content: space-between;
}
.dish_top p{
	
	margin: 5px;
	padding: 0;
	margin-top: 10px;
}

.dish_bottom p{

text-align: left;
font-size: 12px;
margin-left: -5px;
margin-top: 0px;

}
.settle_content_bottom{
	height: 50px;
	display: flex;
	justify-content: space-between;
	background-color: white;
	border-radius: 10px;
	padding: 10px;
	
}
.grey_text{
	font-size: 17px;
	color: #999999;
}
.bottom_fixed{
	position: fixed;
	bottom: 0;
	display: flex;
	background-color: white;
	width: 375px;
	justify-content: space-between;
	height: 70px;
	box-sizing: border-box;
	box-shadow:0 -2px 2px 0 #eeeeee ; 
	padding: 10px;
}
.bottom_fixed .left{
	display: flex;
	margin-left: 10px;
	
}
.finalMoney{
	font-size: 26px;
	color: #e91f3c;
	font-weight: 700;
	margin-top: 8px;
}
.sumbit_pay{
	border: 1px red solid;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	color: #fff;
	background-color:#e91f3c ;
	border-radius: 30px;
	margin-top: 5px;
}
</style>
